<template>
  <section class="bg-white lg:pt-20 lg:pb-14 py-9 text-center">
    <div class="lg:text-3xl text-xl font-bold">平台演示</div>
    <div class="lg:flex hidden mt-10 container mx-auto space-x-8">
      <div
        class="p-[10px] rounded bg-white shadow"
        v-for="item in list"
        :key="item"
      >
        <img :src="item" class="w-full" alt="" />
      </div>
    </div>
    <div class="px-8 lg:hidden block">
      <van-swipe class="my-swipe mt-5" :autoplay="5000" indicator-color="white">
        <van-swipe-item class="" v-for="item in list" :key="item">
          <img
            :src="item"
            class="p-2 rounded border border-gray-300 border-solid w-full"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <info-btn class="mt-12 lg:flex hidden" @click.native="$store.commit('SQ')"
      >免费试用平台</info-btn
    >
  </section>
</template>

<script>
export default {
  data() {
    return {
      list: [
        require("@/assets/img/kq.jpg"),
        require("@/assets/img/kq2.jpg"),
        require("@/assets/img/kq3.jpg"),
      ],
    };
  },
};
</script>
